body {
    width: 100%;
    height: 600px;
    overflow-y: auto;
}

header {
    width: 100%;
    height: 200px;
    background-color: pink;
    .swiper {
        width: 100%;
        height: 100%;
        img {
            width: 100%;
            height: 100%;
        }
    }
}

main {
    height: 460px;
    // background-color: black;
    padding: 0px 20px;
    div {
      margin-bottom: 20px;
    //   background-color: pink;  
    }
    .ranking {
        .left {
            width: 35%;
            height: 100%;
            margin-right: 10px;
            background-color: #54afda;
            padding: 10px;
            position: relative;
            border-radius: 10px;
            background-image: url(../../assets/imgs/奖杯.png);
            background-repeat: no-repeat;
            background-size: 80% 80%;
            background-position: -60% 95%;
            font-weight: bold;
            color: #005177;
            span {
                position: absolute;
                bottom: 14px;
                right: 14px;
                font-size: 22px;
                color: #fff;
                font-weight: bold;
            } 
        }
        .right {
            width: 60%;
            height: 100%;
            background-color: #9fd9f8;
            border-radius: 10px;
            padding: 10px;
            position: relative;
            background-image: url(../../assets/imgs/累计打卡.png);
            background-repeat: no-repeat;
            background-size: 42% 80%;
            background-position: 10% 90%;
            font-weight: bold;
            position: relative;
            color: #005177;
            button {
                position: absolute;
                bottom: 14px;
                right: 14px;
                background-color: #9fd9f8;
                border-radius: 20px;
                width: 80px;
                height: 35px;
                border: 3px solid #000;
                color: #005177;
                cursor: pointer;
            }
        }
    }

    .exercise_data {
        .left {
           padding: 10px;
           font-weight: bold;
           background-image: url(../../assets/imgs/俯卧撑.png);
           width: 48%;
           height: 100%;
           background-size: 100% 100%;
           margin-right: 10px;
           border-radius: 10px;
           color: #fff; 
        };
        .right {
            padding: 10px;
            font-weight: bold; 
            width: 48%;
            height: 100%;
            border-radius: 10px;
            background-image: url(../../assets/imgs/徽章.png);
            background-color: #9dbde3;
            background-size: 52% 80%;
            background-repeat: no-repeat;
            background-position: 4% 120%;
            position: relative;
           div {
            position: absolute;
            right: 10px;
            bottom: -10px;
            color: #005177;
            .number {
                font-size: 40px;
            }
           }
        };
    };

    .drill {
        width: 100%;
        height: 100%;
        background-image: url(../../assets/imgs/皮鞭.jpg);
        color: #fff;
        background-size: 100% 180%;
        background-repeat: no-repeat;
        border-radius: 10px;
        padding: 10px;
    }

    .run {
        width: 100%;
        height: 100%;
        background-image: url(../../assets/imgs/跑步.png);
        color: #fff;
        background-size: 100% 130%;
        background-repeat: no-repeat;
        border-radius: 10px;
        padding: 10px;
    }

    .box {
        width: 150px;
        height: 150px;
        position: absolute;
        left: 30%;
        top: 38%;
        background-color: rgba(255, 255, 255, .5);
        box-sizing: border-box;
        padding: 20px;
        text-align: center;
        border-radius: 15px;
        div {
            margin-bottom: 10px;
            width: 100%;
            text-align: center;
        }
        .icon {
            width: 50px;
            height: 50px;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
        span {
            font-size: 24px;
            font-weight: bold;
        }
    }

    .box_two {
        width: 150px;
        height: 150px;
        position: absolute;
        left: 30%;
        top: 38%;
        background-color: rgba(255, 255, 255, .5);
        box-sizing: border-box;
        padding: 20px;
        text-align: center;
        border-radius: 15px;
        div {
            margin-bottom: 10px;
            width: 100%;
            text-align: center;
        }
        .icon {
            width: 50px;
            height: 50px;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
        span {
            font-size: 24px;
            font-weight: bold;
        }
    }
}

.none {
    display: none;
}

.block {
    display: block;
}

